import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/auth/Login.vue'
import Register from '@/views/auth/Register.vue'
import Layout from '@/layout/index.vue'
import TeamList from '@/views/teams/TeamList.vue'
import TeamDetail from '@/views/teams/TeamDetail.vue'
import MatchList from '@/views/matches/MatchList.vue'
import TicketDetail from '@/views/tickets/TicketDetail.vue'
import Forum from '@/views/forum/ForumList'
import PostDetail from '@/views/forum/PostDetail'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/',
    component: Layout,
    redirect: '/teams',
    children: [
      {
        path: 'teams',
        name: 'TeamList',
        component: TeamList,
        meta: { title: '球队列表', requiresAuth: true }
      },
      {
        path: 'teams/:id',
        name: 'TeamDetail',
        component: TeamDetail,
        meta: { title: '球队详情', requiresAuth: true }
      },
      {
        path: 'matches',
        name: 'MatchList',
        component: MatchList,
        meta: { title: '赛事中心', requiresAuth: true }
      },
      {
        path: 'tickets/:id',
        name: 'TicketDetail',
        component: TicketDetail,
        meta: { title: '购票详情', requiresAuth: true }
      },
      {
        path: 'orders',
        name: 'OrderList',
        component: () => import('@/views/orders/OrderList.vue'),
        meta: { title: '我的订单', requiresAuth: true }
      },
      {
        path: 'matches/:id',
        name: 'MatchDetail',
        component: () => import('@/views/matches/MatchDetail.vue'),
        meta: { title: '比赛详情', requiresAuth: true }
      },
      {
        path: 'forum',
        name: 'Forum',
        component: Forum,
        meta: { title: '球迷论坛', requiresAuth: true }
      },
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('@/views/user/Profile.vue'),
        meta: { 
          title: '个人信息',
          requiresAuth: true 
        }
      },
      {
        path: 'feedback',
        name: 'Feedback',
        component: () => import('@/views/feedback/FeedbackList.vue'),
        meta: { 
          title: '意见反馈',
          requiresAuth: true 
        }
      },
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/home/index.vue'),
        meta: { title: '首页', requiresAuth: true }
      }
    ]
  },
  {
    path: '/forum',
    name: 'Forum',
    component: Forum
  },
  {
    path: '/forum/post/:id',
    name: 'PostDetail',
    component: PostDetail
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
// 需要认证的路由
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //用户未登录
    if (!token) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } 
    //用户已登录但角色不匹配重定向到登录页
    else if (to.meta.roles && !to.meta.roles.includes(userInfo.role)) {
      next('/login')
    } else {
      next()
    }
  } 
  // 非登录/注册页但未认证
  else {
    if (to.path !== '/login' && to.path !== '/register' && !token) {
      next('/login')
    } 
    //用户已登录且角色匹配
    else {
      next()
    }
  }
})

export default router